<template>
  <div class="home_header">
    <!-- 场馆-头部导航栏 -->
    <van-nav-bar style="background: pink" :title="$store.state.title" fixed placeholder v-if="$route.meta.HomeHeader">
      <slot slot="left" name="left" v-if="city">
        <van-icon size="20" style="margin-right: 2px" name="location" />{{ city.substring(3) }}
      </slot>
      <slot slot="right" name="right">
        <van-badge>
          <div class="child">
            <van-icon name="comment" @click="onClickRight" size="22" dot />
          </div>
        </van-badge>
      </slot>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  name: "HomeHeader",
  props: {
    city: String
  },
  methods: {
    onClickRight() {
      this.$router.push('/information')
    }
  }
}
</script>

<style>
.child {
  position: relative;
  margin-top: 25%;
}
</style>
